import React, { Component } from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';

import { colors } from '../../utils/constants';

const Theme = {
  lite: {
    backgroundColor: colors.WHITE,
    textColor: colors.PRIMARY,
    borderColor: colors.PRIMARY,
    disabled: {
      backgroundColor: colors.WHITE,
      textColor: colors.LITE_GRAY,
      borderColor: colors.LITE_GRAY
    }
  },
  dark: {
    backgroundColor: colors.PRIMARY,
    textColor: colors.WHITE,
    borderColor: colors.PRIMARY,
    disabled: {
      backgroundColor: colors.LITE_GRAY,
      textColor: colors.WHITE,
      borderColor: colors.LITE_GRAY
    }
  }
};

const Root = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  height: 50;
  backgroundColor: ${ props => {
    if (props.lite) {
      return props.disabled ? Theme.lite.disabled.backgroundColor : Theme.lite.backgroundColor
    }
    return props.disabled ? Theme.dark.disabled.backgroundColor : Theme.dark.backgroundColor
  }};
  borderColor: ${ props => {
    if (props.lite) {
      return props.disabled ? Theme.lite.disabled.borderColor: Theme.lite.borderColor
    }
    return props.disabled ? Theme.dark.disabled.borderColor : Theme.dark.borderColor
  }};
  borderRadius: 3;
  borderWidth: 2;
  alignItems: center;
  justifyContent: center;
`;

const Text = styled.Text`
  color: ${ props => {
    if (props.lite) {
      return props.disabled ? Theme.lite.disabled.textColor : Theme.lite.textColor
    }
    return props.disabled ? Theme.dark.disabled.textColor : Theme.dark.textColor
  }};
  fontSize: 18;
`;

class RoundCornerButton extends Component {
  render() {

    const { text, children } = this.props;

    return (
      <Root {...this.props}>
        {
          children ||
          <Text
            lite={this.props.lite}
            disabled={this.props.disabled}
          >{text || '按钮'}</Text>
        }
      </Root>
    );
  }
}

export default RoundCornerButton;
